<template>
  <div>
    客户页面
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="clientVO" class="demo-form-inline">
        <!-- 条件 -->
        <el-form-item label="客户名称：">
          <el-input
            v-model="clientVO.cname"
            placeholder="请输入名称"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户公司地址：">
          <el-input
            v-model="clientVO.site"
            placeholder="请输入地址"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户公司规模：">
          <el-select
            v-model="clientVO.scale"
            placeholder="请选择规模"
            style="width: 160px"
          >
            <el-option label="不限" value=""></el-option>
            <el-option label="特大型" value="特大型"></el-option>
            <el-option label="大型" value="大型"></el-option>
            <el-option label="中型" value="中型"></el-option>
            <el-option label="小型" value="小型"></el-option>
            <el-option label="微型" value="微型"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户公司业务区域：">
          <el-input
            v-model="clientVO.area"
            placeholder="请输入业务区域"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户等级：">
          <el-select
            v-model="clientVO.grade"
            placeholder="请选择等级"
            style="width: 160px"
          >
            <el-option label="不限" value=""></el-option>
            <el-option label="1级" value="1"></el-option>
            <el-option label="2级" value="2"></el-option>
            <el-option label="3级" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户银行：">
          <el-input
            v-model="clientVO.bank"
            placeholder="请输入开户银行"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前状态：">
          <el-select
            v-model="clientVO.state"
            placeholder="请选择等级"
            style="width: 160px"
          >
            <el-option label="不限" value=""></el-option>
            <el-option label="启用" value="启用"></el-option>
            <el-option label="未启用" value="未启用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人：">
          <el-input
            v-model="clientVO.creation"
            placeholder="请输入创建人"
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="clientVO.mincreationtime"
            type="date"
            placeholder="选择最小日期"
            style="width: 160px"
          >
          </el-date-picker>
          &nbsp;
          <el-date-picker
            v-model="clientVO.maxcreationtime"
            type="date"
            placeholder="选择最大日期"
            style="width: 160px"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 查询按钮 -->
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-refresh" @click="reset"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table :data="pageBean.beanList" style="width: 100%">
        <el-table-column fixed prop="cname" label="客户名称" width="140" align="center">
        </el-table-column>
        <el-table-column fixed prop="site" label="客户公司地址" width="140" align="center">
        </el-table-column>
        <el-table-column prop="postal" label="客户邮政编码" width="140" align="center">
        </el-table-column>
        <el-table-column prop="scale" label="客户公司规模" width="140" align="center">
        </el-table-column>
        <el-table-column prop="area" label="客户公司业务区域" width="140" align="center">
        </el-table-column>
        <el-table-column prop="grade" label="客户等级/级" width="140" align="center">
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" width="140" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="140" align="center">
        </el-table-column>
        <el-table-column prop="email" label="联系人邮箱" width="140" align="center">
        </el-table-column>
        <el-table-column prop="legal" label="法人" width="140" align="center">
        </el-table-column>
        <el-table-column prop="legalphone" label="法人电话" width="140" align="center">
        </el-table-column>
        <el-table-column
          prop="financecontacts"
          label="客户财务联系人"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="financephone"
          label="客户财务联系电话"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="bank" label="开户银行" width="140" align="center">
        </el-table-column>
        <el-table-column prop="banknumber" label="银行账号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="state" label="当前状态" width="140" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.state === '启用'
                  ? 'success'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.state }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="creation" label="创建人" width="140" align="center">
        </el-table-column>
        <el-table-column prop="creationtime" label="创建时间" width="140" align="center">
        </el-table-column>
        <el-table-column prop="versions" label="版本" width="140" align="center">
        </el-table-column>
        <el-table-column prop="amendtime" label="修改时间" width="140" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改客户"
              placement="top"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                circle
                @click="modifyClient(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除客户"
              placement="top"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                circle
                @click="deleteClient(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageBean: [],
      pageIndex: 1,
      pageSize: 3,
      clientVO: {},
    };
  },
  mounted() {
    this.getClient();
  },
  methods: {
    //重置按钮
    reset() {
      this.clientVO = {};
      this.getClient();
    },

    //删除客户
    deleteClient(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/client/remove?cid=" + row.cid).then((resp) => {
            if (resp.data.code == 200) {
              this.$message("删除成功");
              this.getClient();
            }
          });
        })
        .catch(() => {
          this.$message("已取消删除");
        });
    },

    //修改客户按钮
    modifyClient(row) {
      this.$router.push({ name: "/clientUpdate", params: { cid: row.cid } });
    },

    //条件查询客户
    onSubmit() {
      this.pageIndex = 1;
      this.getClient();
    },

    //查询所有客户
    getClient() {
      this.$axios
        .post(
          "/client/getAll/" + this.pageIndex + "/" + this.pageSize,
          this.clientVO
        )
        .then((resp) => {
          if (resp.data.code == 200) {
            this.pageBean = resp.data.data;
            console.log(this.pageBean.beanList);
          }
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getClient();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getClient();
    },
  },
};
</script>

<style>
</style>